<template>
    <div class="public-contener">
        <Banner state="public"/>
        <div class="hjcy-conten">
            <img src="../assets/img/tit_hjcy.png" alt="" srcset="" class="title">
            <div class="thrid-box">
                <div class="thirn-item" v-for="item in [1,2,3]" :key="item">
                    <PublicItem/>
                </div>
            </div>
            <div class='list'>
                <div class="item-box" v-for="item in [1,2,3]" :key="item">
                    <VoteItem showtype='show'></VoteItem>
                </div>
            </div>
        </div>
        <Reward />
    </div>
</template>

<script>
import Banner from "../components/banner";
import Reward from "../components/reward";
import PublicItem from "../components/public-item";
import VoteItem from '../components/vote-item';

export default {
    components:{
        Banner,
        Reward,
        VoteItem,
        PublicItem
    },
    data(){
        return {

        }
    }    
}
</script>

<style lang="stylus" scoped>
.public-contener
    background $theme-color
    .hjcy-conten
        padding 0 20px
        box-sizing border-box
        .title
            display block
            width 222px
            margin 0 auto
        .thrid-box
            margin-top 15px
            .third-item
                margin-bottom 15px
        .list
            width 100%
            margin-top 16px
            &::after
                content ''
                display block
                clear both
            .item-box
                width 47.5%
                background $theme-color-deeper
                margin-bottom 15px
                box-shadow 0px 2px 8px 0px rgba(100,3,24,0.3)
                border-radius 4px
                &:nth-child(odd)
                    float left
                &:nth-child(even)
                    float right
</style>